<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: xuechengwu@myhexin.com
 * @Date: 2021-08-10 16:17:54
 * @LastEditTime: 2021-08-10 20:11:15
 * @LastEditors: xuechengwu
-->
<template>
  <div ref="container" class="polygon-container">
    <div class="editor-tool">
        <i class="iconfont icon-ic_pen" @click="onFinish" v-if="locked || editable"></i>
        <i class="iconfont icon-pingshenqueren" @click="onEdit" v-if="!locked"></i>
    </div>
    <svg height="100%" width="100%" preserveAspectRatio="none">
        <polygon
            v-if="!locked && !editable"
            :points="points|join(enstyle)"
            :style="{
                fill: fill,
                stroke: stroke,
                strokeWidth: strokeWidth,
            }"
        />
        <polyline
            v-if="locked && !editable"
            :points="editPoints|join(enstyle)"
            :style="{
                fill: 'none',
                stroke: stroke,
                strokeWidth: strokeWidth,
            }"
        />
        <polygon
            v-if="locked && editable"
            :points="innerPoints|join(enstyle)"
            :style="{
                fill: fill,
                stroke: stroke,
                strokeWidth: strokeWidth,
            }"
        />
    </svg>
    <template
        v-if="locked"
    >
       <div
        :class="`edit-point ${!editable && index === 0 ? 'finish-button' : 'normal'}`"
        v-for="(item, index) in innerPoints"
        :key="index"
        :style="{
            left: `${item[0] * enstyle.width - 5}px`,
            top: `${item[1] * enstyle.height - 5}px`,
        }"
        :title="`${!editable && index === 0 ? '点击完成绘制' : ''}`"
        @mousedown="pointSelected(index)"
        ></div> 
    </template>
  </div>
</template>

<script>
import _ from 'lodash';
import Vue from 'vue';
export default {
    props: {
        stroke: {
            type: String,
            default: 'black',
        },
        strokeWidth: {
            type: Number,
            default: 3,
        },
        points: {
            type: Array,
            default: () => [],
        },
        fill: {
            type: String,
            default: 'none',
        },
        enstyle: {
            type: Object,
            default: () => ({}),
        },
        locked: {
            type: Boolean,
            default: true,
        },
        editable: {
            type: Boolean,
            default: false,
        }
    },
    
    filters: {
        join(data, enstyle) {
            const { width, height } = enstyle
            return data.map(vo => (vo[0] * width) + ',' + (vo[1] * height)).join(' ');
        }
    },
    computed: {
        editPoints() {
            const { locked, editable, innerPoints, toolX, toolY } = this;
            if (locked && !editable) {
                return [].concat(innerPoints).concat([[toolX, toolY]]);
            } else if (locked && editable) {
                return innerPoints;
            }
            return [];
        }
    },
    data() {
        return {
            innerPoints: [],
            selectPoint: -1,
            toolX: 0,
            toolY: 0,
        };
    },

    mounted() {
        if (this.locked && !this.editable) {
            this.$refs.container.addEventListener('click', (e) => {
                if (!this.locked || this.editable) {
                    return;
                }
                const { clientX, clientY } = e;
                const { enstyle = { width: 0, height: 0 } } = this;
                const box = this.$refs.container.getBoundingClientRect();
                const { width, height } = box;
                const x = (clientX - box.left) / width;
                const y = (clientY - box.top) / height;
                if (this.innerPoints.length > 0) {
                    const point = this.innerPoints[0];
                    const dist = (point[0] - x) * (point[0] - x) * enstyle.width * enstyle.width
                        + (point[1] - y) * (point[1] - y) * enstyle.height * enstyle.height;
                    if (dist < 10) {
                        this.finish();
                    } else {
                        this.innerPoints.push([x, y]);
                    }
                } else {
                    this.innerPoints.push([x, y]);
                }
                
            });
        }
        this.$refs.container.addEventListener('mousemove', (e) => {
            const { clientX, clientY } = e;
            const box = this.$refs.container.getBoundingClientRect();
            const { width, height } = box;
            const x = (clientX - box.left) / width;
            const y = (clientY - box.top) / height;
            if (this.selectPoint >= 0 && this.editable) {
                console.log('change points===>', this.innerPoints, this.selectPoint, x, y);
                Vue.set(this.innerPoints, this.selectPoint, [x, y]);
                // this.innerPoints[this.selectPoint] = [x, y];
            }
            if (this.locked && !this.editable) {
                this.toolX = x;
                this.toolY = y;
            }
        });
        this.$refs.container.addEventListener('mouseup', (e) => {
            this.selectPoint = -1;
        });
        this.innerPoints = _.cloneDeep(this.points);
    },
    methods: {
        finish(e) {
            console.log('points===>', this.innerPoints);
            this.$emit('event', { event: 'ok', value: this.innerPoints });
        },
        /**
         * 节点选中
         */
        pointSelected(index) {
            console.log('index===>', index);
            this.selectPoint = index;
        },
        onEdit(e) {
            e.stopPropagation();
            this.$emit('event', { event: 'doEditable', value: { editable: true,  locked: true }});
        },
        onFinish(e) {
            e.stopPropagation();
            this.$emit('event', { event: 'doEditable', value: { editable: false,  locked: false }});
        }
    }
}
</script>

<style lang="less" scoped>
.polygon-container {
    width: 100%;
    height: 100%;
    cursor: crosshair;
    position: relative;
    .edit-point {
        position: absolute;
        display: inline-block;
        border: solid 1px #2a5caa;
        width: 10px;
        cursor: move;
        height: 10px;
        &.finish-button:hover {
            cursor: pointer;
            background: #2a5baa63;
        }
    }
    .editor-tool {
        position: absolute;
        right: 0;
        top: 0;
        display: inline-block;
        z-index: 108;
    }
}
</style>
